<template>
  <div>
    <!-- 搜索区域保持不变 -->
    <div class="search-container">
      <span class="control-label">企业：</span>
      <el-input v-model="input" placeholder="请输入企业名称" class="control-item enterprise-input"></el-input>
      
      <span class="control-label">时间：</span>
      <div class="time-inputs control-item">
        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </div>
      
      <el-select v-model="value" placeholder="请选择" class="control-item">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      
      <el-button type="primary" class="control-item">查询</el-button>
      <el-button type="success" class="control-item">重置</el-button>
    </div>

    <!-- 添加 compact-header 类名 -->
    <el-table :data="tableData" style="width: 100%; margin-top: 15px;" class="compact-header">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline>
            <el-row>
              <el-col :span="6"><el-form-item label="商品名称"><span>{{ props.row.hrBelongCompany }}</span></el-form-item></el-col>
              <el-col :span="6"><el-form-item label="所属店铺"><span>{{ props.row.shop }}</span></el-form-item></el-col>
              <el-col :span="6"><el-form-item label="商品 ID"><span>{{ props.row.id }}</span></el-form-item></el-col>
              <el-col :span="6"><el-form-item label="店铺 ID"><span>{{ props.row.shopId }}</span></el-form-item></el-col>
              <el-col :span="6"><el-form-item label="商品分类"><span>{{ props.row.category }}</span></el-form-item></el-col>
              <el-col :span="6"><el-form-item label="店铺地址"><span>{{ props.row.address }}</span></el-form-item></el-col>
              <el-col :span="6"><el-form-item label="商品描述"><span>{{ props.row.desc }}</span></el-form-item></el-col>
            </el-row>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="hr所属企业" prop="hrBelongCompany"></el-table-column>
      <el-table-column label="主账号" prop="mainAccount"></el-table-column>
      <el-table-column label="所属行业" prop="belongIndustry"></el-table-column>
      <el-table-column label="营业执照过期时间" prop="expirationTime"></el-table-column>
      <el-table-column label="营业执照状态" prop="state"></el-table-column>
      <el-table-column label="hr操作" prop="operation"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      options: [/* 选项数据保持不变 */],
      value: '',
      value1: '',
      tableData: [/* 表格数据保持不变 */]
    }
  }
}
</script>

<style>
/* 企业输入框样式 */
.enterprise-input {
  width: 250px;
}

/* 紧凑型表头样式 */
.compact-header ::v-deep .el-table__header th {
  height: 36px;  /* 调整表头高度为36px */
  padding: 4px 0; /* 调整内边距 */
}

/* 确保表头文字垂直居中 */
.compact-header ::v-deep .el-table__header .el-table__cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 其他原有样式保持不变 */
.search-container {
  display: flex;
  align-items: center;
  padding: 15px 0;
}
.control-item {
  margin-right: 15px;
}
.control-label {
  margin-right: 8px;
  white-space: nowrap;
}
.search-container > :last-child {
  margin-right: 0;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-table .cell {
  text-align: center;
}
</style>